<template>
    <div class="register_container">
        <div class="register_box">
            
            <h2 class="title">欢迎注册岳麓书院知识管理系统</h2>
            <el-form :rules="registerFormRules" ref="form" label-width="0px" class="register_form" :model="registerForm">
                <!-- 手机号-->
                <el-form-item prop="phone" ref="phoneref">
                    <el-input v-model="registerForm.phone"  placeholder="请输入手机号" ></el-input>
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item prop="code">
                    <el-col :span="15">
                        <el-input v-model="registerForm.code" placeholder="请输入验证码"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="send">发送验证码</el-button>
                    </el-col>
                </el-form-item>
                <!-- 密码-->
                <el-form-item prop="password">
                    <el-input type="password" v-model="registerForm.password"  placeholder="请输入密码"></el-input>
                </el-form-item>
                <!-- 输入第二次密码 -->
                <el-form-item prop="confirmPassword">
                    <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再一次输入密码"></el-input>
                </el-form-item>
                <!-- 按钮区-->
                <el-form-item class="btns">
                    <!-- 验证码发送按钮 -->
                    <!-- <el-button @click="send">发送验证码</el-button> -->
                    <el-button type="primary" @click="register" style="background: #770000; height: 45px">确认注册</el-button>
                </el-form-item>
            </el-form>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default {
        data() {
            return{
                registerForm: {
                    phone: '',
                    code: '',
                    password: '',
                    confirmPassword: ''
                },
                registerFormRules: {
                    // 验证用户名是否合法
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入长度为11的手机号', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                    // 验证密码是否合法
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入长度在 6 到 20 之间的密码', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '请输入长度在 6 到 20 之间的密码', trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            
            send() { // 发送验证码
                function getLength(str = ''){
                    let len = 0;
                    for (let i = 0; i < str.length; i++) {
                        len++;
                    }
                    return len;
                }
                if( getLength(this.registerForm.phone) === 11 ){
                    if(this.registerForm.phone !== ''){
                            requests.get('/users/send', {
                                params: {
                                    phone: this.registerForm.phone
                                }   
                            }).then(
                                (res) => {
                                    if(res.code == 1) {
                                        console.log(res.data)
                                        this.$message.success('发送验证码成功')
                                    }
                                },
                                (error) => {
                                    console.log(error)
                                }
                            )
                        }
                }
                else {
                    this.$message.error('手机号格式错误')
                }
            },
            register() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        requests.post('/users/register',this.registerForm).then(
                            (res) => {
                            // console.log(this.registerForm)
                                if(res.code == 1) {
                                 // console.log(res.data)
                                    this.$message.success('注册成功！请返回登陆界面进入系统！')
                                    this.$router.push('/login')
                                } else {
                                    this.$message.error(res.msg)
                                }
                            }
                        )
                    }
                    else {
                        this.$message.error('密码格式不正确，请重新输入')
                        return false;
                    }
                })
                // console.log(this.registerForm);
                

                
            }
        }
    }
</script>

<style lang="less" scoped>
.register_container {
    height: 100%;
  width: 100%; //设置div宽度
  background: url("../assets/log.png");
  background-size: 75% 100%;  //设置图片大小
  background-repeat: no-repeat;//将图片样式不重复
}
.title{
  margin-top: 60px;
  text-align: center;
}
.register_box {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(40%, -50%);
  width: 400px;
  height: 500px;
  padding-bottom:30px;
  background-color: rgb(247, 247, 247);
  border-radius: 5%;
  box-shadow: 0 0 20px #0000002d;

  .register_form {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding:  40px;
    width: 95%;
    .codebtn {
        float:right
    }
  }
  .btns button {
    border: none;
    width: 100%;
  }
}
</style>
